<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include/head::commonHeaderList('老师空闲时间表')"/>

<body >

<div id="content" class="col-lg-12 col-sm-12">
    <div class="row">
        <div class="box col-md-12" style="padding: 0;margin-top: 5px;">
            <div class="box-inner">
                <div class="box-header well" data-original-title="">
                    <h2>
                        <i class="glyphicon glyphicon-list"></i>老师空闲时间表
                    </h2>
                    <div class="box-icon">
                        <a href="javascript:void(0);" id="smaller" class="btn btn-minimize btn-round btn-default"><i class="glyphicon glyphicon-chevron-up"></i></a>
                    </div>
                </div>
                <div class="box-content">
                    <form class="form-inline form-search " role="form" th:action="@{'/lesson/teacher/free/class'}" onsubmit="return checkForm()">
                        <select id="groupId" class="selectpicker" name="groupId" data-live-search="true" th:title="请选择老师分组" data-live-search-placeholder="搜索">
                            <option value="0">--老师分组--</option>
                            <option value="4" th:selected="${groupId==4}">钻石套餐Diamond Group(可跨组)</option>
                            <option value="5" th:selected="${groupId==5}">铂金套餐Platinum Group(可跨组)</option>
                            <option value="6" th:selected="${groupId==6}">白银套餐Silver Group(可跨组)</option>
                            <option value="7" th:selected="${groupId==7}">口语测试OPT</option>
                            <option value="8" th:selected="${groupId==8}">体验课DemoTeacher</option>
                            <option value="9" th:selected="${groupId==9}">美式音标课IPA</option>
                            <option value="11" th:selected="${groupId==11}">自然拼读Phontics</option>
                            <option value="12" th:selected="${groupId==12}">旅游英语Travel</option>
                            <option value="13" th:selected="${groupId==13}">字母课Alphabet</option>
                            <option value="14" th:selected="${groupId==14}">面试英语Interview</option>
                            <option value="15" th:selected="${groupId==15}">加州教材CalifornianBook</option>
                            <option value="24" th:selected="${groupId==24}">Management</option>
                            <option value="25" th:selected="${groupId==25}">少儿绘本PictureBook</option>
                            <option value="41" th:selected="${groupId==41}">暑假包月套餐组</option>
                            <option value="42" th:selected="${groupId==42}">KidsCorner组</option>
                            <option value="43" th:selected="${groupId==43}">早班老师组Morning Shift teachers</option>
                            <option value="44" th:selected="${groupId==44}">晚班老师Evening Shift Teachers</option>
                            <option value="49" th:selected="${groupId==49}">钻石/欧美老师(可跨组)</option>
                            <option value="50" th:selected="${groupId==50}">银铂教师组</option>
                            <option value="51" th:selected="${groupId==51}">SSC组</option>
                            <option value="52" th:selected="${groupId==52}">新店试听组</option>
                            <option value="53" th:selected="${groupId==53}">中教老师组</option>
                            <option value="63" th:selected="${groupId==63}">欧美外教组</option>
                            <option value="67" th:selected="${groupId==67}">体验课测试组</option>
                            <option value="68" th:selected="${groupId==68}">Team-Wendy-JUNE2020</option>
                            <option value="69" th:selected="${groupId==69}">Team-Betty</option>
                            <option value="77" th:selected="${groupId==77}">Site 1老师组</option>
                            <option value="78" th:selected="${groupId==78}">Site 2老师组</option>
                            <option value="79" th:selected="${groupId==79}">Site 3老师组</option>
                            <option value="82" th:selected="${groupId==82}">白银老师组</option>
                            <option value="83" th:selected="${groupId==83}">兼职老师组</option>
                            <option value="84" th:selected="${groupId==84}">小学词汇课</option>
                            <option value="88" th:selected="${groupId==88}">home-based</option>
                            <option value="89" th:selected="${groupId==89}">Team Joan-JUNE2020</option>
                            <option value="90" th:selected="${groupId==90}">学龄前分级绘本Picture book</option>
                            <option value="91" th:selected="${groupId==91}">pronunciation音标课</option>
                        </select>
                        <select id="teacherLevel" class="selectpicker" name="teacherLevel" data-live-search="true" th:title="请选择老师级别" data-live-search-placeholder="搜索">
                            <option value="">--老师级别--</option>
                            <option value="1" th:selected="${teacherLevel==1}">白银老师</option>
                            <option value="2" th:selected="${teacherLevel==2}">铂金老师</option>
                            <option value="3" th:selected="${teacherLevel==3}">钻石老师</option>
                            <option value="4" th:selected="${teacherLevel==4}">青铜老师</option>
                            <option value="5" th:selected="${teacherLevel==5}">欧美老师</option>
                            <option value="6" th:selected="${teacherLevel==6}">中教老师</option>
                        </select>
                        <input type="text" name="startDate" maxlength="10" th:value="${startDate}" id="startDate" class="form-control" onfocus="WdatePicker()">
                        <button class="btn btn-primary" type="submit"> 查 询 </button>

                    </form>
                    <table class="table table-striped table-bordered table-hover" style="margin-top: 10px;" data-show-toggle="false">
                        <thead>
                        <tr>
                            <th class="text-center">#</th>
                            <th class="text-center" style="width: 200px;">日期</th>
                            <th class="text-center" style="width: 100px;">上课时间</th>
                            <th class="text-center" data-breakpoints="xs">空闲老师名单</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="item,itemStat:${listFree}">
                            <td class="text-center" th:text="${itemStat.index+1}"></td>
                            <td class="text-center" style="white-space:nowrap;" th:text="${#dates.format(item.releaseTime,'yyyy-MM-dd')}"></td>
                            <td class="text-center" th:text="${#dates.format(item.releaseTime,'HH:mm')}"></td>
                            <td th:with="listTea=${#strings.listSplit(item.teacherLogin,',')}">
                                <span th:each="teaItem,teaItemStat:${listTea}">
                                    <a href="javascript:"  th:with="teaInfo=${#strings.arraySplit(teaItem,'|')}" th:onclick="teacherInfo([[${teaInfo[1]}]])" th:text="${teaInfo[0]}"></a>
                                    <span th:if="${!teaItemStat.last}"> | </span>
                                </span>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:include="include/onload_js::onloadJSCustomList(~{::script})">
<script>
    function teacherInfo(teacherId){
        let url = "/personCtl/teacher/info/"+teacherId+"/0";
        layer.open({
            type: 2,
            title: false,
            closeBtn: 1, //显示关闭按钮
            shade: [0.5],
            area: ['80%', '90%'],
            //offset: 'rb', //右下角弹出
            // time: 2000, //2秒后自动关闭
            anim: 2,
            content: [url, 'yes'], //iframe的url，no代表不显示滚动条
        });
    }

    function checkForm() {
        if ($.trim($("#startDate").val())===''){
            layer.tips('请选择查询日期','#startDate',{tips: [3, '#3595cc']});
            return false;
        }
    }
</script>

</body>
</html>